<template>
	<!-- 我的报名搜索 -->
	<view class="container">
		<view class="search-head">
			<uni-icons class="back-btn" type="left" size="30" color="#fff" @click="goBack"></uni-icons>
			<view class="head-title">
				筛选条件
			</view>
			<view class="search-img">
				<image class="img" mode="widthFix" src="/static/img/consumption/search.png"></image>
			</view>
			<view class="content">
				<view class="item search-area ">
					<view class="search-box">
						<view class="title">
							起点名称
						</view>
						<input class="inp" type="text" v-model="searchInfo1.startingPlace"
							placeholder="请输入起点项目名称进行模糊匹配" />
					</view>
					<view class="search-box">
						<view class="title">
							运企名称
						</view>
						<input class="inp" type="text" v-model="searchInfo1.transportCompanyName"
							placeholder="请输入运企名称进行模糊匹配" />
					</view>
				</view>
				<view class="item">
					<view class="title">
						作业车辆
					</view>
					<view class="buttons">
						<Button2 class="btn" :class="isCheckCartType(item.hphm) ?'active':'info'"
							v-for="item in cartList" :key="item.id" @click="changeCartType(item.hphm)">
							<text>{{item.hphm}}</text>
							<view class="icon">
								<uni-icons type="checkmarkempty" size="10" color="#fff"></uni-icons>
							</view>
						</Button2>
					</view>
				</view>
				<view class="item">
					<view class="title">
						作业时段
					</view>
					<view class="choose-time">
						<view class="time-box">
							<view class="name">
								出发日期
							</view>
							<view class="name">
								结束日期
							</view>
						</view>
						<view class="time-box time-box2">
							<view class="time" @click="showCalendar('startTime')">
								<view class="no-time" v-if="getTime('startTime') == ''">
									<uni-icons class="icon" type="plus-filled" color="#989DA5" size="30"></uni-icons>
									选择时段
								</view>
								<view class="time-text" v-else>
									{{getTime('startTime')}}
								</view>
							</view>

							<view class="time" @click="showCalendar('endTime')">
								<view class="no-time" v-if="getTime('endTime') == ''">
									<uni-icons class="icon" type="plus-filled" color="#989DA5" size="30"></uni-icons>
									选择时段
								</view>
								<view class="time-text" v-else>
									{{getTime('endTime')}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- :min-date="getMinDate" -->
			<up-calendar round="30" :min-date="getMinDate" :default-date="getDefaultDate" month-num="12"
				:show="isShowCalendar" @confirm="changeCalendar" @close="changeCalendar">
			</up-calendar>
		</view>
		<view class="bottom-btns">
			<view class="btn reset-btn" @click="reset">重置</view>
			<view class="btn search-btn" @click="search">查询</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import Button2 from '@/components/button2/button2.vue';
	import { computed, reactive, ref } from 'vue';
	import { useConsumptionStore ,useUserStore} from '@/stroes';
	import dayjs from 'dayjs'
	const consumptionStore = useConsumptionStore()
	const userStore = useUserStore()
	// 作业车辆
    const cartList = ref(userStore.cartList)
	onShow(() => {
		if (consumptionStore.searchInfo) {
			searchInfo1.startingPlace = consumptionStore.searchInfo?.startingPlace
			searchInfo1.transportCompanyName = consumptionStore.searchInfo?.transportCompanyName
			if(consumptionStore.searchInfo?.startTime){
				searchInfo1.startTime = consumptionStore.searchInfo?.startTime
			}
			if(consumptionStore.searchInfo?.endTime){
				searchInfo1.startTime = consumptionStore.searchInfo?.endTime
			}
			if(consumptionStore.searchInfo?.checkCartTypes.length>0){
				checkCartTypes.value = consumptionStore.searchInfo?.checkCartTypes
			}
			// checkCartTypes
			

		}
	})
	// 出料搜索信息
	const searchInfo1 = reactive({
		// 起点项目名称
		startingPlace: '',
		// 运企名称
		transportCompanyName: '',
		//开始时间
		startTime: '',
		//结束时间 
		endTime: '',
	})
	

	// 车辆类型
	const cartTypes = [{ id: '1', text: '内转车' }, { id: '2', text: '名录车' }, { id: '0', text: '非名录车' },]
	// 选中的车辆类型
	const checkCartTypes = ref([])
	// 是否包含车辆类型
	const isCheckCartType = computed(() => {
		return (id) => {
			return checkCartTypes.value.find(item => item == id)
		}
	})
	// 改变车辆类型
	const changeCartType = (id) => {
		if (checkCartTypes.value.find(item => item == id)) {
			checkCartTypes.value = checkCartTypes.value.filter(item => item !== id)
		} else {
			
			checkCartTypes.value.push(id)
		}
	}
	// 是否显示日期弹出窗
	const isShowCalendar = ref(false)
	// 当前选择时间的类型
	const nowCheckTimeType = ref('startTime')
	// 显示日期弹窗
	const showCalendar = (type : string) => {
		nowCheckTimeType.value = type;
		isShowCalendar.value = true
	}
	// 获取时段
	const getTime = computed(() => {
		return (type : string) => {
			return searchInfo1[type]
		}
	})
	// 获取最小日期
	const getMinDate = computed(() => {
		let curDate = (new Date()).getTime();
		// 七天
		let sevenDay = 7 * 24 * 3600 * 1000
		let pastResult = curDate - sevenDay;
		if (nowCheckTimeType.value === 'startTime') {
			return dayjs(pastResult).format("YYYY-MM-DD")
		} else {
			let time = searchInfo1['startTime']
			if (time) {
				return time
			} else {
				return dayjs(pastResult).format("YYYY-MM-DD")
			}
		}
	})
	// 获取默认时间
	const getDefaultDate = computed(() => {
		if (nowCheckTimeType.value === 'startTime') {
			let startTime = searchInfo1['startTime']
			if (startTime === '') {
				let date = new Date();
				return [dayjs(date).format('YYYY-MM-DD')];
			} else {
				return startTime;
			}
		} else {
			let endTime = searchInfo1['endTime']
			if (endTime === '') {
				let startDate = searchInfo1['startTime'];
				if (startDate) {
					return [dayjs(startDate).add(1, 'day').format('YYYY-MM-DD')];
				} else {
					let date = new Date();
					return [dayjs(date).format('YYYY-MM-DD')];
				}

			} else {
				return endTime;
			}
		}
	})
	// 改变日期
	const changeCalendar = (date) => {
		if (date) {
			searchInfo1[nowCheckTimeType.value] = dayjs(date[0]).format('YYYY-MM-DD hh:mm:ss')
		}
		isShowCalendar.value = false
	}
	// 重置搜索
	const reset = () => {
		searchInfo1.startingPlace = ''
		searchInfo1.transportCompanyName = ''
		searchInfo1.startTime = ''
		searchInfo1.endTime = ''
		checkCartTypes.value=[]
	}
	// 开始搜索
	const search = () => {
        console.log("checkCartTypes",checkCartTypes.value)
		
			searchInfo1.checkCartTypes=checkCartTypes.value
		
		consumptionStore.searchInfo = searchInfo1

		goBack()
	}

	// 返回上一层
	const goBack = () => { uni.navigateBack() }
</script>

<style scoped lang="scss">
	.search-head {
		position: relative;
		padding: 0rpx 32rpx;
		height: 684rpx;
		background: url('@/static/img/consumption/search-head.png') no-repeat no-repeat center/ 100% 100%;

		.back-btn {
			display: inline-block;
			margin: 116rpx 0rpx 64rpx;
		}

		.head-title {
			margin-left: 54rpx;
			margin-bottom: 56rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
		}

		.search-img {
			position: absolute;
			top: 106rpx;
			right: 42rpx;
			width: 332rpx;
			height: 332rpx;

			.img {
				width: 100%;
			}
		}

		.content {
			padding: 0rpx 32rpx;

			.item {
				margin-bottom: 20rpx;
				padding: 32rpx 24rpx 20rpx;
				border-radius: 16rpx;
				background-color: #fff;

				.title {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: bold;
				}

				.inp {
					margin-bottom: 20rpx;
					padding: 24rpx 20rpx;
					font-size: 24rpx;
					border-radius: 8rpx;
					background: #EFF6FE;
				}

				.buttons {
					.btn {
						position: relative;
						margin-right: 16rpx;
						padding: 14rpx 20rpx;
						font-size: 24rpx;
						border-radius: 8rpx;

						.icon {
							display: none;
							position: absolute;
							bottom: 0;
							right: 0;
							width: 26rpx;
							height: 20rpx;
							line-height: 20rpx;
							text-align: center;
							border-radius: 6rpx 0rpx 8rpx 0rpx;
							background-color: $primary-color;
						}

						&.active {
							.icon {
								display: block;
							}
						}
					}
				}

				.time-box {
					display: flex;
					align-items: center;

					.no-time {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 166rpx;
						height: 58rpx;
						font-size: 24rpx;
						color: $info-color;
						border: 2rpx solid $info-color;
						border-radius: 8rpx;
					}
				}

				.choose-time {

					.time-box {
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;

						.name {
							flex: 1;
							margin-bottom: 16rpx;
							font-size: 24rpx;
							color: $info-color;
						}

						&.time-box2 {
							border-radius: 8rpx;
							background: #EFF6FE;
						}

						.time {
							flex: 1;
							padding: 26rpx 0rpx 22rpx 24rpx;

							.date-time {
								font-size: 36rpx;
								font-weight: bold;
								color: #000;
							}

							.no-time {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 166rpx;
								height: 58rpx;
								font-size: 24rpx;
								color: $info-color;
								border: 2rpx solid $info-color;
								border-radius: 8rpx;
							}
						}
					}
				}
			}
		}
	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		width: 100%;
		padding: 14rpx 32rpx 28rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btn {
			font-size: 28rpx;
			text-align: center;
			padding: 22rpx 0rpx;
			border-radius: 48rpx;
		}

		.reset-btn {
			margin-right: 12rpx;
			width: 226rpx;
			color: $primary-color;
			border: 2rpx solid $primary-color;
			background-color: #fff;
		}

		.search-btn {
			flex: 1;
			color: #fff;
			background-color: $primary-color;
		}
	}
</style>